<template>
  <div ref="containerRef" id="graph" class="viewport"></div>
  <TeleportContainer :flow-id="flowId" />
  <el-button @click="out">测试输出</el-button>
  <el-button @click="add">添加一个吧</el-button>
  <el-button @click="addEdge">添加一个边</el-button>
  <el-button @click="move">移动到中间</el-button>
</template>

<script setup lang="ts">
import { onMounted, ref, useId } from 'vue'
import { forEach, map, has } from 'lodash-es'
import LogicFlow, { ElementState, LogicFlowUtil } from '@logicflow/core'
import { register, getTeleport } from '@logicflow/vue-node-registry'
import '@logicflow/core/es/index.css'
import ProgressNode from '@/components/ProgressNode.vue'
import customEdge from '@/components/customEdge';
// 测试输出的数据，做到回显
const obj = {
  "nodes": [
    {
      "id": "vue-node-6",
      "type": "custom-vue-node",
      "x": 180,
      "y": 80,
      "properties": {
        "progress": 60,
        "width": 80,
        "height": 80
      }
    },
    {
      "id": "vue-node-7",
      "type": "custom-vue-node",
      "x": 380,
      "y": 80,
      "properties": {
        "progress": 60,
        "width": 100,
        "height": 100
      }
    },
    {
      "id": "e3695cd3-2886-43c5-ae13-10ec05648677",
      "type": "custom-vue-node",
      "x": 280,
      "y": 180,
      "properties": {
        "progress": 60,
        "width": 80,
        "height": 80
      }
    },
    {
      "id": "f388671c-d8ba-4c2c-8cfe-b516015610e4",
      "type": "custom-vue-node",
      "x": 280,
      "y": 180,
      "properties": {
        "progress": 60,
        "width": 80,
        "height": 80
      }
    },
    {
      "id": "1748150365364",
      "type": "custom-vue-node",
      "x": 280,
      "y": 400,
      "properties": {
        "progress": 30,
        "width": 80,
        "height": 80
      }
    }
  ],
  "edges": [
    {
      "id": "2d67d70b-74f3-4f8c-91d4-84c9a53e8ba2",
      "type": "polyline",
      "properties": {},
      "sourceNodeId": "vue-node-6",
      "targetNodeId": "vue-node-7",
      "sourceAnchorId": "vue-node-6_1",
      "targetAnchorId": "vue-node-7_3",
      "startPoint": {
        "x": 220,
        "y": 80
      },
      "endPoint": {
        "x": 330,
        "y": 80
      },
      "pointsList": [
        {
          "x": 220,
          "y": 80
        },
        {
          "x": 330,
          "y": 80
        }
      ]
    }
  ]
}
const containerRef = ref<HTMLDivElement | null>(null)
const TeleportContainer = getTeleport()
const flowId = ref('')
const lf = ref<LogicFlow>()

onMounted(() => {
  if (containerRef.value) {
    lf.value = new LogicFlow({
      container: containerRef.value,
      grid: true,
      snapline: true,
    })

    // 注册自定义 vue 节点
    register({
      type: 'custom-vue-node',
      component: ProgressNode,
    }, lf.value)
    // 自定义边
    lf.value.register(customEdge)

    lf.value.on('graph:rendered', ({ graphModel }) => {
      console.log('==> graphModel.flowId', graphModel.flowId)
      flowId.value = graphModel.flowId!
    })

    // 注册事件
    let configData = ref<LogicFlow.GraphConfigData>(
      {
        nodes: [
          {
            id: 'vue-node-6',
            type: 'custom-vue-node',
            x: 180,
            y: 80,
            properties: {
              progress: 60,
              width: 80,
              height: 80
            }
          },
          {
            id: 'vue-node-7',
            type: 'custom-vue-node',
            x: 380,
            y: 80,
            properties: {
              progress: 60,
              width: 80,
              height: 80
            }
          },
          {
            id: 'vue-node-8',
            type: 'custom-vue-node',
            x: 280,
            y: 180,
            properties: {
              progress: 60,
              width: 80,
              height: 80
            }
          },
          {
            id: '1',
            type: 'rect',
            x: 100,
            y: 60,
            text: '矩形',
          },
          {
            id: '2',
            type: 'circle',
            x: 300,
            y: 60,
            text: '圆形',
          },
        ],
        edges: [
          {
            sourceNodeId: '1',
            targetNodeId: '2',
            type: 'CustomEdge'
          },
          {
            sourceNodeId: 'vue-node-6',
            targetNodeId: 'vue-node-7',
            type: 'CustomEdge'
          },
        ]
      }
    )

    lf.value.render(configData.value)
  }
})

function out() {
  const data = lf.value?.getGraphData()
  console.log('data is ', data)
}
function add() {
  console.log('==> lf.value', lf.value)
  lf.value?.addNode({
    id: Date.now().toString(),
    type: 'custom-vue-node',
    x: 280,
    y: 400,
    properties: {
      progress: 30,
      width: 80,
      height: 80
    }
  })
}
function addEdge() {
  const data = lf.value?.getGraphData() as LogicFlow.GraphData
  const nodes = data?.nodes || []
  console.log('==> nodes', nodes)
  if (nodes.length >= 2) {
    const pre = nodes[0]
    const next = nodes[1]
    lf.value?.addEdge({
      sourceNodeId: pre.id,
      targetNodeId: next.id
    })
  }
}
function move() {
  lf.value?.translateCenter()
}


</script>

<style>
#graph {
  height: 700px;
}
</style>